import React from 'react';
import {
  StyleSheet,
  View,
  TouchableOpacity,
} from 'react-native';
import InputItem from '../InputItem';
import FontText from '../FontText';
import { scaleSize } from '../../../utils/screen';
import { i18n } from '../../../i18n';
import _ from 'lodash';

class LayoutModal extends React.Component {
  constructor(props) {
    super(props);

    const { layout } = props;

    this.state = {
      layout,
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.layout !== nextProps.layout) {
      this.setState({
        layout: nextProps.layout,
      });
    }
  }

  onSave() {
    const { layout } = this.state;
    const { onSave } = this.props;

    onSave && onSave(layout);
  }

  onCancel() {
    const { onCancel } = this.props;

    onCancel && onCancel();
  }

  changeName(name) {
    this.setState({
      layout: {
        ...this.state.layout,
        name,
      },
    });
  }

  render() {
    const { show } = this.props;

    if (show) {
      return this._renderModal();
    }

    return null;
  }

  _renderModal() {
    const { layout } = this.state;
    const isEditing = _.has(layout, 'server_layout_id');

    return (
      <View style={styles.modalView}>
        <View style={styles.modalContainer}>
          <View style={styles.modalHeader}>
            <TouchableOpacity
              style={styles.modalHeaderButton}
              activeOpacity={0.8}
              onPress={() => this.onCancel()}
            >
              <FontText
                style={styles.modalHeaderButtonLabel}
                font={'book'}
              >
                {i18n.t('btns.cancel')}
              </FontText>
            </TouchableOpacity>
            <FontText
              style={styles.modalHeaderTitle}
              font={'medium'}
            >
              {
                isEditing ?
                i18n.t('store.table.modal.layout.editlayout') :
                i18n.t('store.table.modal.layout.newlayout')
              }
            </FontText>
            <TouchableOpacity
              style={styles.modalHeaderButton}
              activeOpacity={0.8}
              onPress={() => this.onSave()}
            >
              <FontText
                style={styles.modalHeaderButtonLabel}
                font={'book'}
              >
                {i18n.t('btns.save')}
              </FontText>
            </TouchableOpacity>
          </View>
          <View style={styles.modalBody}>
            <View style={styles.formGroup}>
              <FontText
                font={'book'}
                height={scaleSize(50)}
                style={styles.formLabelText}
              >
                {i18n.t('store.table.modal.layout.layoutnamelabel')}
              </FontText>
              <View style={styles.formControl}>
                <InputItem
                  value={layout.name}
                  valuChange={(val) => this.changeName(val)}
                  style={styles.formControlText}
                />
              </View>
            </View>
          </View>
        </View>
      </View>
    );
  }
};

/* StyleSheet =============================================================== */

const styles = StyleSheet.create({
  modalView: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    right: 0,
    top: 0,
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.2)',
  },
  modalContainer: {
    width: scaleSize(700),
    backgroundColor: '#0f162a',
    overflow: 'hidden',
  },
  modalHeader: {
    backgroundColor: '#232b40',
    height: scaleSize(90),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: scaleSize(30),
  },
  modalHeaderTitle: {
    color: '#fff',
    fontSize: scaleSize(30),
  },
  modalHeaderButton: {
    paddingHorizontal: scaleSize(30),
  },
  modalHeaderButtonLabel: {
    color: '#fd265d',
    fontSize: scaleSize(30),
  },
  modalBody: {
    paddingHorizontal: scaleSize(60),
    paddingTop: scaleSize(30),
    paddingBottom: scaleSize(50),
  },
  formGroup: {
    flexDirection: 'column',
  },
  formLabelText: {
    color: '#fff',
    fontSize: scaleSize(30),
    textAlign: 'center',
  },
  formControl: {
    backgroundColor: '#394158',
    paddingHorizontal: scaleSize(18),
    height: scaleSize(60),
    marginVertical: scaleSize(10),
  },
  formControlText: {
    color: '#fff',
  },
});

export default LayoutModal;